<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // React component order
        // 1. 组件的名称第一个字母必须大写，如果首字母大写，React 会误认为是一个 html 标签
        // 2. render 函数必须有
        // 3. constructor 函数建议有
        // 4. return 返回的部分，一定用括号包裹起来，并且左右括号要和 return 一行
        // 5. JSX 的模板
        // 6. 变量放在最下面
        // 7. 使用 get/set 方法
        class MyComponent extends React.Component{
            constructor(props) {
                super(props);

                this._name = 'Huang JX';
                this.age = 25;
            }

            get name() {
                return this._name;
            }

            set name(value) {
                this._name = value;
            }
            
            render() {
                // let name = 'Huang JX';
                // let age = 21;

                // return (
                //     <h4>Hello world! I am {name}, and {age} years old</h4>
                //     );

                return (
                    <h4>Hello world! I am {this.name}, and {this.age} years old</h4>
                );
            }

        }
        let oDiv = document.getElementById('app');

        ReactDOM.render(
            <MyComponent />,
            oDiv
        );
    </script>
</body>
</html>